<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>枫枫知道|在线聊天室</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/elementui/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/index.css">
</head>
<body>

<div id="app">
    <div class="banner">
        <h1>枫枫知道|即时通讯系统</h1>
        <p>在线人数：[[ count ]]</p>
    </div>

    <main id="message_list">
        <el-scrollbar ref="scrollbar" style="height: 480px">

            <div :class="item.class" v-for="(item, index) in ms_list" :key="index">

                <div class="left">
                    <span class="title">
                        [[ item.name ]]
                    </span>
                    <span class="content">
                        [[ item.msg ]]
                    </span>
                </div>
                <img :src="item.avatar" alt="">
            </div>
        </el-scrollbar>
    </main>
    <div class="revert">
        <input placeholder="输入你的内容" @keydown.enter="apply" v-model="content" type="text">
        <button @click="apply">回复</button>
    </div>
</div>

</body>
<script src="/static/vue.js"></script>
<script src="/static/js/uuid.js"></script>

<script src="/static/elementui/index.js"></script>
<script src="/static/jquery.min.js"></script>
<script src="/static/js/faker.js"></script>
<script>

    // 唯一编号，用于判断消息是否是自己发的
    let uid = uuid.v4()


    // faker.locale = 'zh_CN'
    let name = faker.name.firstName();
    // 随机头像
    let avatar_list = [
        'https://img1.baidu.com/it/u=583582599,306470958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        'https://img0.baidu.com/it/u=1329709505,2760911286&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
        'https://img0.baidu.com/it/u=178892670,2966992691&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
        'https://img0.baidu.com/it/u=2895625925,2395286370&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
        'https://img0.baidu.com/it/u=2601170227,3207786263&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        'https://img1.baidu.com/it/u=793269991,2224346596&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        'https://img2.baidu.com/it/u=42440934,3756045585&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        'https://img1.baidu.com/it/u=194801324,3941016336&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=502',
        'https://img0.baidu.com/it/u=430794405,2531826213&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    ]
    let avatar = avatar_list[Math.floor((Math.random() * avatar_list.length))]


    function to_json(obj) {
        return JSON.stringify(obj)
    }

    function to_obj(json) {
        return JSON.parse(json)
    }

    new Vue({
        el: '#app',
        delimiters: ["[[", "]]"],
        data: {
            websocket: null,
            content: '',
            uuid: uid,
            ms_list: [],
            init_num: 1,
            count: 1,

        },
        mounted() {
            this.init_websocket()
            window.onbeforeunload = () => {
                let data = {
                    code: 110,
                    uuid: uid,
                    class: 'room_in'

                }
                this.send_to_msg(data)
            }
        },
        methods: {
            // 建立连接
            async init_websocket() {
                this.websocket = await new WebSocket('ws://' + window.location.host + '/ws/result/');

                this.websocket.onmessage = this.websocket_onmessage;
                this.websocket.onopen = this.websocket_onopen;
                this.websocket.onerror = this.websocket_onerror;
                this.websocket.onclose = this.websocket_close;
            },

            // 发送消息
            send_to_msg(msg) {
                this.websocket.send(to_json(msg))
            },
            // 接收消息
            websocket_onmessage(e) {
                let data = to_obj(e.data)
                if (data.code === 108 && data.uuid !== uid) {
                    data.class = 'other'
                }

                this.ms_list.push(data)
                this.count = data.number_people
                // 控制窗口滚动
                let bar = this.$refs.scrollbar.wrap
                let top = $('.el-scrollbar__view').height()

                $(bar).animate({scrollTop: top + 40}, 200)

            },
            // 建立连接之后的回调
            websocket_onopen(e) {
                let data = {
                    code: 106,
                    uuid: uid,
                    class: 'room_in',
                }
                this.send_to_msg(data)
            },
            websocket_onerror(e) {
                console.log(e)
            },
            websocket_close(e) {
                console.log(e)
            },

            apply() {
                if (this.content.trim() === '') {
                    this.content = ''
                }
                let data = {
                    code: 108,
                    msg: this.content,
                    avatar,
                    name,
                    uuid: uid,
                    class: 'me'
                }
                this.send_to_msg(data)
                this.content = ''
            }

        }
    })


</script>
</html>